<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* body 样式 */
body {
    font-family: Arial;
    margin: 0;
}

/* 标题 */
.header {
  background-color: slategray;
  height: 130px;
  text-align: center;
  padding: 1px 20px;

}
.header h1{
  color: snow;
  font-size: 50px; 
  top: 50px;
}




/* 导航 */
.navbar {
    overflow: hidden;
    background-color: #333;
    margin: 0 auto;
}

/* 导航栏样式 */
.navbar a {
    margin-left: 125px;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}



/* 鼠标移动到链接的颜色 */
.navbar a:hover {
    background-color: #ddd;
    color: rgb(236, 12, 12);
}
/* 列容器 */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* 内容*/
.side {
  width: 700px;
  border: 1px solid rgb(128, 128, 128);
  padding: 40px 40px ;
  margin: 20px;
}
.side h2{
  padding-bottom: 5px;
  color: red;
  font-weight: bold;
}
.side ul{
   padding:5px 10px ;
   background: wheat;
}
.side ul li{
  list-style: none;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px dashed rgb(230, 17, 17);
  text-indent: 15px;
  font-size: 14px;
  background:url(img/tb.gif) no-repeat center left;
}
.side ul a{
  text-decoration: none;
  color: rgb(77, 48, 240);
}
.side ul a:hover{
  text-decoration: underline;
  color: red;
}
/* 左边排版 */
.viod li{
    font-size: 20px;
    font-weight: bold;
}
.viod li a{
  text-decoration: none;
  color: rgb(8, 7, 19);
}
.viod li a:hover{
  text-decoration: underline;
  color: red;
}

.void li{
    font-size: 15px;
}
.void li a{
  text-decoration: none;
  color: rgb(8, 7, 19);
}
.void li a:hover{
  text-decoration: underline;
  color: red;
}
/* 主要的内容区域 */
.main {   
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    background-color: white;
    padding: 20px;
}
.main h2 a{
    text-decoration: none;
    color:rgb(136, 77, 136);
    padding: 20px;
    text-align: center;
}
.main h2 a:hover{
  color:rgb(230, 17, 17);
}

/*图片的定位*/
.main img.right { 
    float: left;
    box-shadow: 5px 5px 5px #888888;
}
.main img.center {
    margin-left: 10px;
    box-shadow: 5px 5px 5px #888888;
}
.main img.left {
    float: left;
    box-shadow: 5px 5px 5px #888888;
    margin-right:13px;
}

.main img.right1 {
    float: left;
    box-shadow: 5px 5px 5px #888888;
}
.main img.center1 {
    margin-left: 10px;
    box-shadow:  5px 5px 5px #888888;
}
.main img.left1 {
    float: left;
    box-shadow: 5px 5px 5px #888888;
    margin-right:13px;
}


/* 底部 */
.footer {
    padding-bottom: 10px;
    text-align: center;
    background: #1abca1;
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 800px) {
    .row {   
        flex-direction: column;
        width:100%;
    }
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h1 class="col-4">XXXX军事网</h1>
</div>

<div class="navbar">
  <a href="https://mil.huanqiu.com/world">军事动态</a>
  <a href="https://mil.huanqiu.com/gt">图说军事</a>
  <a href="https://mil.huanqiu.com/milmovie">军事速递</a>
  <a href="https://mil.huanqiu.com/aerospace">军民融合</a>
  <a href="http://weapon.huanqiu.com/weaponlist">兵器库</a>
</div>

<div class="row">
  <div class="side">
      <h2>热门视频</h2>
      <ul>
        <li><a href="https://new.qq.com/omv/video/b3101yzxeqk">现场！中国军人红场彩排唱《喀秋莎》网友：气质这块拿捏的死死的</a></li>
        <li><a href="https://new.qq.com/omv/video/f3100kymsjl">中印冲突为何升级？印度部队非法越线攻击，赵立坚表明中方立场</a></li>
        <li><a href="https://new.qq.com/omv/video/y3101kc6kb8">帅！解放军仪仗队齐唱莫斯科郊外的晚上</a></li>
        <li><a href="https://new.qq.com/omv/video/v31014n6p86">最帅天团！解放军中俄双语高唱喀秋莎过红场 俄民众纷纷围观拍照</a></li>
        <li><a href="https://new.qq.com/omv/video/b31017joqov">亚洲特快：高原作战，中国准备好了，那印度呢？</a></li>
        <li><a href="https://new.qq.com/omv/video/t3100w2qdic">中印“高原武器”谁更强？我军国产装备实力雄厚</a></li> 
      </ul>
      <h3>更多资讯</h3>
      <div class="viod" style="height:40px;"><li><a href="https://new.qq.com/rain/a/20200618A0FI4X00">美国在中国周边动作不断 美军舰机同一天现身东海南海</a></li></div>
      <div class="void" style="height:30px;"><li><a href="https://new.qq.com/omn/20200618/20200618V08QHZ00.html">探访全军最后一支军鸽部队 带你认识屡建奇功的“英雄军鸽”！</a></li></div>
      <div class="void" style="height:30px;"><li><a href="https://new.qq.com/omn/20200617/20200617V0D5O400.html">嫦娥四号传回最新月球表面图片 即将展开月球南极探测</a></li></div>
      <div class="void" style="height:30px;"><li><a href="https://new.qq.com/omn/20200618/20200618A056W700.html">部队进驻高原有什么讲究？重型武器使用将受到严重限制</a></li></div>
      <div class="void" style="height:30px;"><li><a href="https://new.qq.com/omn/20200618/20200618A05YNK00.html">部队人员进驻高原面临生理心理双重考验，要加大人文关怀和心理疏导</a></li></div>
  </div>
  <div class="main">
      <h2><a href="#">西方对华恐慌蔓延到机器人上：无武装机器人都让分析家如临大敌</a></h2>
      <div style="height:200px;">
      <a href="#"><img src="0.jpg" width="150px" height="150px" class="left"/></a>
      <a href="#"><img src="1.jpg" width="150px" height="150px" class="center"/></a>
      <a href="#"><img src="2.jpg" width="150px" height="150px" class="right"/></a>
      </div>
      <br>
      <h2><a href="#">“疫”线故事分享会，点燃建功军港情</a></h2>
      <div style="height:200px;">
      <a href="#"><img src="1.0.jpg" width="150px" height="150px" class="left1"/></a>
      <a href="#"><img src="1.1.jpg" width="150px" height="150px" class="center1"/></a>
      <a href="#"><img src="1.2.jpg" width="150px" height="150px" class="right1"/></a>
      </div>
  </div>
</div>

<div class="footer">
    <p class="">24小时客户服务热线：010-68988888       <a href="#">常见问题解答</a>       新闻热线：010-627488888<br />
        文明办网文明上网举报电话：010-627488888        举报邮箱：<a href="#">jubao@jb-aptech.com.cn</a></p>
      <p class="copyright">Copyright &copy; 1999-2009 News China gov, All Right Reserver<br />
        新闻中国   版权所有</p>
</div>

</body>
</html>